import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import CountUI from "../../../5_src_react-redux的基本使用/components/Count";
import store from "../../redux/store";

//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h1>当前求和为：{this.props.count}</h1>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}
/*  容器一方面要联系组件（现在做的事情）一方面要联系redux（在入口文件index.js中写<Provider store={store}> ）
 	*****容器的简写方式：直接在组件里写connect
	使用connect()()创建并暴露一个Count的容器组件
 	原型：export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
	function mapStateToProps(state){
		return {count:state}
	}   简写成state => ({count:state}),  箭头函数返回一个对象 去掉{} 得包小括号
*/
export default connect(           //这里采用匿名函数的方式
	state => ({count:state}),       //state是 reducer里的 const initState = 0 //初始化状态
									// 他的子组件，UI组件将这样接收{this.props.count}

	//mapDispatchToProps的原写法
	/*
		原写法： jia: ()=>{}
		jia:(number)=> {dispatch(createIncrementAction(number))}
		简写：（()里只有一个参数，可以省略() {}里只有一条语句可以省略{} ）
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	 */

	//mapDispatchToProps的再简写  参数和方法体都省了，dispatch都省了，只告诉调用哪个action  底层自动dispatch
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

